<!-- pages/emergency/emergency.vue -->
<template>
  <view class="container">
    <!-- 地图区域 -->
    <map
      class="map"
      :latitude="location.latitude"
      :longitude="location.longitude"
	  :scale="scale"
	  :markers="markers"
      show-location
    ></map>
    
    <!-- 服务类型选择 -->
    <view class="service-type">
	  <view class="type-item" 
	  v-for="(item,index) in serviceType"
	  :key="index"
	  @tap="switchTab(index)"
	  :class="{active:index==currentTab}"
	  >{{item}}</view>
    </view>
    
    <!-- 表单区域 -->
  <view class="form-section">
	 <form @submit="handleSubmit">	
       <view class="form-item" v-if="currentTab!==2">
        <view class="label">位置</view>
        <input type="text" 
		v-model="form.location"
		placeholder="河南省焦作市山阳区32号" />
       </view>
	  
	  <view class="form-item" v-if="currentTab==2">
	    <view class="label">起点</view>
	    <input type="text"
		 v-model="form.startingPoint"
		 placeholder="山阳区解放路66号" />
	  </view>
	  
	  <view class="form-item" v-if="currentTab==2">
	    <view class="label">终点</view>
	    <input type="text"
		 v-model="form.endPoint"
		 placeholder="河南省焦作市山阳区32号" />
	  </view>
      
      <view class="form-item">
        <view class="label">求助人</view>
        <input type="text" 
		v-model="form.name"
		placeholder="张先生" />
      </view>
      
      <view class="form-item">
        <view class="label">联系方式</view>
        <input type="number"
		v-model="phone"
		placeholder="15523632541" />
      </view>
      
      <view class="form-item" v-if="currentTab!==2">
        <view class="label">车牌</view>
        <input type="text"
		v-model="form.carNumber"
		placeholder="豫CJ4321" />
      </view>
	  
	 <view class="form-item" v-if="currentTab==2">
	   <view class="label">车型</view>
	   <uni-data-select
	         v-model="form.carType"
	         :localdata="range"
			 placeholder="请选择车型"
	       ></uni-data-select>
	  </view>
      
      <view class="form-item">
        <view class="label">描述</view>
        <textarea 
		v-model="form.description"
		placeholder="请准确描述当前的状况及所需的帮助" />
      </view>
	  
	  <!-- 呼叫救援按钮 -->
	  <button class="call-help"  form-type="submit" >呼叫救援</button>
	</form>  
  </view>
    

    <view class="help-record" @click="toRecord">救援记录 ></view>
    
    <!-- 警务救助 -->
    <view class="police-help">
      <view class="help-title">警务救助</view>
      <view class="help-list">
		<view class="help-item" v-for="(item,index) in emergencyContacts" 
		:key="index"
		@click="call(index)">
		  <image :src="item.image"></image>
		  <text>{{item.name}}</text>
		  <text>{{item.number}}</text> 
		</view>
      </view>
    </view>
	
	<!-- 底部导航栏 -->
	    <view class="tab-bar">
	      <view class="tab-bar-item">
	        <image src="/static/rescue/首页1.png"
			 mode="aspectFit"
			@click="toShouye"
			class="tab-icon"></image>
	        <text>首页</text>
	      </view>
	      <view class="tab-bar-center">
		   	<image src="/static/rescue/救援.png" class="center-btn"></image>
	      </view>
	      <view class="tab-bar-item">
	        <image src="/static/rescue/我的1.png" 
			mode="aspectFit"
			@click="toWode"
			class="tab-icon"></image>
	        <text>我的</text>
	      </view>
	    </view>
  </view>
</template>

<script>
	// 引入SDK核心类，js文件根据自己业务，位置可自行放置
	var QQMapWX = require('../../static/qqmap-wx-jssdk.min.js');
	var qqmapsdk;
export default {
  data() {
    return {
		//地图标记点 
      markers: [{
        id:1,
        latitude: '',
        longitude:'',
        title: '当前位置'
      }],
	  // 地图缩放比例
	  scale:10,
      location:{
		  // 纬度
		latitude: "",
		   // 经度
		longitude:""
	  },
	  // 服务类型
	  serviceType:['搭电', '换胎', '拖车'],
	  // 点击服务类型的index
	  currentTab:0,
	  // 下拉框
	  range: [
	    { value: 0, text: "货车" },
	    { value: 1, text: "卡车" },
	    { value: 2, text: "宝马" },
	  ],
	  // 表单
	  form:{},
	  // 警务求助
	  emergencyContacts:[
		  {image:"/static/rescue/交通事故@2x.png",name:"交通事故",number:"122"},
		  {image:"/static/rescue/火警@2x.png",name:"火警",number:"119"},
		  {image:"/static/rescue/急救包@2x.png",name:"急救中心",number:"120"},
		  {image:"/static/rescue/警察,公安@2x.png",name:"公安报警",number:"110"}
	  ],
	  // 当前日期时间
	 currentDate: '',
    }
  },
  methods: {
    // 获取当前位置
    getLocation() {
	  const that=this;
      uni.getLocation({
        type: 'gcj02',
        success: (res) => {
          that.location.latitude = res.latitude
          that.location.longitude = res.longitude
		  that.markers[0].latitude=res.latitude
		  that.markers[0].longitude=res.longitude
		  console.log("经纬度");
		  console.log("that.latitude:"+that.location.latitude);
		  console.log("that.longitude:"+that.location.longitude);
        },
		fail(res) {
			console.log("获取地图位置失败"+res);
		}
      })
    },
	// 获取点击服务类型选择的index
	switchTab(index){
		this.currentTab=index
	},
	// 获取当前时间
	getCurrentDate(){
	  const date = new Date();
      const year = date.getFullYear()
      const month = (date.getMonth() + 1).toString().padStart(2, '0')
      const day = date.getDate().toString().padStart(2, '0')
	  const hour=date.getHours().toString()
	  const mintue=date.getMinutes().toString()
	  const second=date.getSeconds().toString()
      this.currentDate = `${year}-${month}-${day} ${hour}:${mintue}:${second}`	
	  console.log(this.currentDate);
	},
	//呼叫救援   表单提交  
	handleSubmit(e){
		console.log("wwwwwwwwww================wwwwwwwwww");
		console.log(this.form);
		this.getCurrentDate();
		uni.request({
			url:"",
			success() {
				console.log(e);
			}
		})
	},
	
	// 救援记录跳转
	toRecord(){
		uni.navigateTo({
			url:"/pages/emergency/record/record"
		})
	},
	// 底部导航栏跳转
	toShouye(){
		uni.navigateTo({
			url:"/pages/index/index"
		})
	},
	toWode(){
		uni.navigateTo({
			url:"/pages/my/my"
		})
	},
	
	// 打电话
	call(index){
		console.log(index);
		uni.makePhoneCall({
			phoneNumber:this.emergencyContacts[index].number
		})
	},
  
   // 把得到的经纬度转换成地址显示在页面上
   getCurrentLocation(){
	var _this = this;
	qqmapsdk.reverseGeocoder({
		// location:{
		// 	latitude:_this.latitude,
		// 	longitude:_this.longitude
		// },
		success:(res)=>{
			console.log("成功");
			console.log(res);
			_this.form.location=res.result.address,
			_this.form.startingPoint=res.result.address
		},
		fail:(e)=>{
			console.log("错误");
			console.log(e);
		}
	})   
   }
  },
  // 页面加载时加载地图
  onLoad() {
	// 实例化API核心类
    qqmapsdk = new QQMapWX({
        key:"OFUBZ-SKY6H-2THDJ-WTCY3-GGQL3-DBFGN"
    });
  this.getLocation()
  },
  onShow(){
	
	
  },
 onReady(){
	this.getCurrentLocation()
  }
}
</script>

<style scoped>
.container {
  padding-bottom: 100rpx;
}

.map {
  width: 100%;
  height: 400rpx;
}

.service-type {
  display: flex;
  padding: 20rpx;
  background: #fff;
}

.type-item {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
}

.type-item.active {
  color: #007AFF;
  border-bottom: 4rpx solid #007AFF;
}

.form-section {
  padding: 20rpx;
  background: #fff;
}

.form-item {
  margin-bottom: 20rpx;
}

.form-item .label {
  margin-bottom: 10rpx;
  width: 160rpx;
  height: 60rpx;
  line-height: 60rpx;
  background-color: rgb(67, 95, 255);
  text-align: center;
  border-radius: 8rpx;
 font-size: 36rpx;
}

.form-item input,
.form-item textarea {
  width: 100%;
  padding: 20rpx;
  background: #F5F5F5;
  border-radius: 10rpx;
}

.form-item textarea {
  height: 160rpx;
}

.call-help {
  width: 90%;
  margin: 30rpx auto;
  background: #FF6B34;
  color: #fff;
  border-radius: 50rpx;
}

.help-record {
  text-align: center;
  color: #666;
  margin-bottom: 30rpx;
}

.police-help {
  padding: 20rpx;
  margin-bottom: 50rpx;
}

.help-title {
  margin-bottom: 20rpx;
  font-weight: bold;
}

.help-list {
  display: flex;
  justify-content: space-between;
}

.help-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.help-item image {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 10rpx;
}

.tab-bar {
 position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  border-top: 2rpx solid #eee;
}

.tab-bar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #999;
}

.tab-bar-center {
  width: 160rpx;
  display: flex;
  justify-content: center;
}

.center-btn {
  width: 100rpx;
  height: 100rpx;
  /* background: linear-gradient(to right, #FF7A45, #FF4D4F); */
  background-color: #d85c4b;
  border-radius: 50rpx;
  margin-top: -50rpx;
}

.tab-icon {
  width: 48rpx;
  height: 48rpx;
  margin-bottom: 6rpx;
}
	
.tab-jiuyuan{
	width: 100rpx;
	height: 100rpx;
}
</style>
